/**
 * @deprecated 自定义的类 span 节点，统一管理局部文字样式
 */

import { attribute } from '../../utils/observer.js'
import { styleEqual } from '../../utils/utils.js'
import TextBaseElement from '../core/text-base.js'

export default class TextElement extends TextBaseElement {
    connectedCallback() {
        // 监听 style attribute 变化的回调
        const fn = () => {
            const prev = this.previousSibling
            const next = this.nextSibling

            // 节点合并
            if (this.style.length) {
                // 前、中 节点相同
                if (prev && prev.nodeType === this.nodeType && styleEqual(this.style, prev.style)) {
                    // 前、中、后 三节点都相同
                    if (next && next.nodeType === this.nodeType && styleEqual(prev.style, next.style)) {
                        prev.lastChild.appendData(`${this.textContent}${next.textContent}`)
                        next.remove()
                    } else {
                        prev.lastChild.appendData(this.textContent)
                    }
                    this.remove()
                }
                // 中、后 节点相同
                else if (next && next.nodeType === this.nodeType && styleEqual(this.style, next.style)) {
                    next.firstChild.insertData(0, this.textContent)
                    this.remove()
                }
            }
            // 转换为文本
            else {
                // 存在前一个文本节点
                if (prev && prev.nodeType === 3) {
                    prev.appendData(this.textContent)
                }
                // 存在后一个文本节点
                else if (next && next.nodeType === 3) {
                    next.insertData(0, this.textContent)
                }
                // 没有可合并的文本节点
                else {
                    const node = document.createTextNode(this.textContent)
                    this.parentElement.insertBefore(node, this)
                }
                // 移除当前节点
                this.remove()
            }
        }

        attribute(this, fn, false, ['style'])
    }
}
